<template>
  <div class="newroleGroupContainer">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          {{title}}
          <div class="close" @click="cancel()"></div>
        </div>
        <div style="padding:0 0.3rem;">
          <el-form :model="roleGroupData">
            <el-form-item label="角色名称" :label-width="formLabelWidth" :rules="[]">
              <el-input style="width:35%" v-model="roleGroupData.roleGroupName" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="主角色项" :label-width="formLabelWidth" :rules="[]">
              <el-radio-group v-model="roleId">
                <el-radio
                  :label="item.roleId"
                  v-for="item in roleList"
                  :key="item.roleId"
                >{{item.roleName}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="附属角色项" :label-width="formLabelWidth" :rules="[]">
              <el-radio-group v-model="roleAttachId">
                <el-radio
                  :label="item.roleId"
                  v-for="item in roleAttachList"
                  :key="item.roleId"
                >{{item.roleName}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn_div">
          <div class="btn_sure" @click="sure()">确 认</div>
          <div class="btn_cancel" @click="cancel()">取 消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: false,
      title: "",
      formLabelWidth: "140px",
      roleId: "",
      roleAttachId: "",
      roleGroupData: {},
      roleList: [],
      roleAttachList: []
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      if (data.roleGroupId == null) {
        vm.isAdd = true;
        vm.title = "新增角色";
        vm.roleGroupData = {
          roleGroupName: "",
          roleGroupSetList: []
        };
      } else {
        vm.isAdd = false;
        vm.title = "编辑角色";
        vm.roleGroupData = data;
        console.log(data);
        data.roleGroupSetList.forEach(element => {
            if(element.isAttaching == '1'){
                vm.roleAttachId = element.roleId;
            }else{
                vm.roleId = element.roleId;
            }
            
        });
      }
      vm.initData();
    },
    initData() {
      api.roleListForUser({}).then(function(data) {
        if (data.resultCode == 2000) {
          vm.roleList = data.list;
        } else {
          vm.$message.error(data.message);
        }
      });
      api.getAttachingRoleList().then(function(data) {
        if (data.resultCode == 2000) {
          vm.roleAttachList = data.list;
        } else {
          vm.$message.error(data.message);
        }
      });
    },

    sure: function() {
      if (vm.roleGroupData.roleGroupName == "") {
        this.$message.warning("角色名称不能为空");
        return;
      }
      if (vm.roleId == "") {
        this.$message.warning("请选择主角色");
        return;
      }
      if (vm.roleAttachId == "") {
        this.$message.warning("请选择附属角色");
        return;
      }
      vm.roleGroupData.roleGroupSetList = [];
      vm.roleGroupData.roleGroupSetList.push({ roleId: vm.roleId });
      vm.roleGroupData.roleGroupSetList.push({ roleId: vm.roleAttachId });
      if (vm.isAdd) {
        api.rolegroupAdd(vm.roleGroupData).then(function(data) {
          if (data.resultCode == 2000) {
            vm.$message({
              message: "添加成功",
              type: "success"
            });
            vm.$emit("callback", "添加成功");
            vm.cancel();
          } else {
            vm.$message.error(data.message);
          }
        });
      } else {
        api.rolegroupUpdate(vm.roleGroupData).then(function(data) {
          if (data.resultCode == 2000) {
            vm.$message({
              message: "编辑成功",
              type: "success"
            });
            vm.$emit("callback", "添加成功");
            vm.cancel();
          } else {
            vm.$message.error(data.message);
          }
        });
      }
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
        vm.roleId = "";
        vm.roleAttachId = "";
      }, 500);
    }
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss">
.newroleGroupContainer {
  .el-radio {
    margin-right: 0.2rem;
    margin-bottom: 0.1rem;
  }
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .el-radio__label {
    font-size: 0.164rem;
    padding-left: 0.1rem;
}
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  width: 8rem;
}
</style>

